<template>
	<view class="skill">
		<view class="skill-list">
			<view class="skill-item">
				<view class="skill-item-lf">
					<text class="num">1</text>
					<image src="https://img.qiananquang.com/minapp/jqbg.png" mode="aspectFit"></image>
					<text>安全题</text>
				</view>
				<view class="skill-item-rt">
					<view class="top">
						【安全题】答题技巧
					</view>
					<view class="mind">
						<text class="tag1">秘籍口诀</text>
						<text>3.2万人看过</text>
					</view>
					<view class="bottom">
						<text style="color: #B36745;">付费精讲</text>
						<text>会员专享</text>
						<view class="btn free">
							免费
						</view>
					</view>
				</view>
			</view>
			<view class="skill-item">
				<view class="skill-item-lf">
					<text class="num">1</text>
					<image src="https://img.qiananquang.com/minapp/jqbg.png" mode="aspectFit"></image>
					<text>安全题</text>
				</view>
				<view class="skill-item-rt">
					<view class="top">
						【安全题】答题技巧
					</view>
					<view class="mind">
						<text class="tag1">秘籍口诀</text>
						<text>3.2万人看过</text>
					</view>
					<view class="bottom">
						<text style="color: #B36745;">付费精讲</text>
						<text>会员专享</text>
						<view class="btn free">
							免费
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.skill {
		.skill-list{
			margin: 0 30rpx;
			.skill-item{
				display: flex;
				align-items: center;
				border-radius: 20rpx;
				overflow: hidden;
				background: #fff;
				margin: 30rpx 0;
				.skill-item-lf{
					width: 250rpx;
					height: 200rpx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
					}
					.num{
						position: absolute;
						top: 0;
						left: 0;
						width: 50rpx;
						height: 50rpx;
						text-align: center;
						line-height: 50rpx;
						border-radius:20rpx 8rpx 8rpx 8rpx;
						background: #161F27FF;
						color: #fff;
						z-index: 1;
					}
				}
				.skill-item-rt{
					margin-left: 12rpx;
					flex: 1;
					.top{
						font-weight: 700;
						font-size: 34rpx;
						color: #1E1E20;
					}
					.mind{
						font-weight: 400;
						font-size: 24rpx;
						color: #5C5C5C;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 15rpx 0;
						.tag1{
							font-weight: 500;
							font-size: 28rpx;
							color: #E59E62;
							width: 150rpx;
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							display: inline-block;
							background: #F9E4D2FF;
							border-radius: 10rpx;
						}
					}
					.bottom{
						font-weight: 400;
						font-size: 26rpx;
						height: 60rpx;
						background: #F4F4FE;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.btn{
							width: 120rpx;
							height: 60rpx;
							background: #1B51F3;
							border-radius: 20rpx;
							font-weight: 500;
							font-size: 26rpx;
							color: #FFFFFF;
							line-height: 60rpx;
							text-align: center;
						}
					}
					
				}
			}
		}
	}
</style>